<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <link rel="stylesheet" href="/admin/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all" />
    <style>
      .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div>
          <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
          </div>
          <table id="menu-table" class="layui-table" lay-filter="menu-table"></table>
        </div>
      </div>
    </div>
    <script type="text/html" id="state">
      <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="开|关" lay-filter="state" {{
      d.state == 1 ? 'checked' : '' }} {{d.id == 100 || d.id == 101 || d.id == 102 ? 'disabled' : ''}}>
    </script>
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      <a class="layui-btn layui-btn-xs" lay-event="add"> 添加 </a>
    </script>

    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js" charset="utf-8"></script>
    <script>
      layui.use(['form', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        treetable.render({
          treeColIndex: 1,
          treeSpid: 0,
          treeIdName: 'id',
          treePidName: 'parent_id',
          elem: '#menu-table',
          url: '/admin/menu/list',
          page: false,
          cols: [
            [
              { field: 'id', title: '菜单ID', width: 80 },
              { field: 'title', minWidth: 200, title: '菜单名称' },
              { field: 'href', title: '菜单URL' },
              {
                field: 'icon',
                title: '图标',
                width: 100,
                align: 'center',
                templet: function (d) {
                  if (d.icon) {
                    return `<span><i class="${d.icon}"></i></span>`;
                  }
                  return '';
                },
              },
              { field: 'target', width: 100, align: 'center', title: '打开方式' },
              { field: 'sort', width: 100, align: 'center', title: '排序' },
              {
                field: 'is_menu',
                width: 100,
                align: 'center',
                templet: function (d) {
                  if (d.is_menu == 0) {
                    return '<span class="layui-badge layui-bg-gray">按钮</span>';
                  }
                  if (d.parent_id == 0) {
                    return '<span class="layui-badge layui-bg-blue">目录</span>';
                  } else {
                    return '<span class="layui-badge-rim">菜单</span>';
                  }
                },
                title: '类型',
              },
              {
                field: 'state',
                width: 100,
                title: '状态',
                align: 'center',
                templet: '#state',
              },
              { templet: '#auth-state', width: 180, align: 'center', title: '操作' },
            ],
          ],
          done: function () {
            treetable.foldAll('#menu-table');
            layer.closeAll('loading');
          },
        });

        $('#btn-expand').click(function () {
          treetable.expandAll('#menu-table');
        });

        $('#btn-fold').click(function () {
          treetable.foldAll('#menu-table');
        });

        form.on('switch(state)', function (obj) {
          $.ajax({
            url: '/admin/menu/changeState',
            type: 'POST',
            data: {
              id: this.value,
              state: obj.elem.checked,
            },
            success: function (res) {
              layer.msg(res.message);
            },
          });
        });

        //监听工具条
        table.on('tool(menu-table)', function (obj) {
          var data = obj.data;
          var layEvent = obj.event;

          if (layEvent === 'del') {
            layer.confirm(
              `是否确认要删除菜单：<span style="color: blue; font-weight:bold;">${data.title}</span>？`,
              function (index) {
                $.ajax({
                  url: '/admin/menu/delete',
                  type: 'post',
                  data: { id: data.id },
                  success: function (data) {
                    if (data.code != 200) {
                      layer.msg(data.message);
                      return;
                    }

                    layer.msg(data.message || '删除成功');
                    obj.del();
                    layer.close(index);
                  },
                });
              }
            );
          } else if (layEvent === 'edit') {
            sessionStorage.setItem('edit_id', data.id);

            var index = layer.open({
              title: '修改菜单',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ['100%', '100%'],
              content: 'edit.html',
            });
            $(window).on('resize', function () {
              layer.full(index);
            });
          } else if (layEvent === 'add') {
            sessionStorage.setItem('add_parent_id', obj.data.id);

            var index = layer.open({
              title: '添加菜单',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ['100%', '100%'],
              content: 'add.html',
            });
            $(window).on('resize', function () {
              layer.full(index);
            });
          }
        });
      });
    </script>
  </body>
</html>
